<template>
	<view class="app-showhall">

		<!-- header  -->
		<view class="e-font-30 header e-flex-y">
			<e-navbar autoBack :title="title" bg-color="transparent" leftIconColor="white"
				:titleStyle="{ color: 'white' }"></e-navbar>
			<view class="" style="flex:1"></view>
			<view class="time-bar">
				<scroll-view :scrollX="true" :scroll-into-view="scrollIntoViewId" :scroll-with-animation="true"
					class="time-list">
					<view v-for="(item, index) in 12" @tap="onTapTime(index)" :id="'time_id_' + index" class="item"
						:class="{ on: index === currentTimeIndex }">
						<view class="e-flex-y container">
							<text class="time">{{ index }}11:00-11:30</text>
							<text class="state">已结束</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>


		<view class="e-flex-x">
			<view class="coundown-timer card e-flex-1">
				<text class="t">本场</text>
				<text class="counter">00</text>
				<text class="t">时</text>
				<text class="counter">42</text>
				<text class="t">分</text>
				<text class="counter">12</text>
				<text class="t">秒</text>
				<text class="t">后{{ 1 ? "开始" : "结束" }}</text>
			</view>

			<view class="reservation card" style="margin-left: 0;">
				<button class="reservation-btn on">已预约本场</button>
			</view>
		</view>



		<!-- filtter  -->
		<view class="filters e-flex-x e-p-l-20 e-p-r-30" style="align-items: center;">
			<scroll-view :scrollX="true" class="category e-flex-1 e-flex-x" style="flex-wrap: wrap;">
				<view class="card on">全部商品</view>
				<view class="card">云炉紫砂壶</view>
				<view class="card">云炉紫砂壶</view>
			</scroll-view>
			<view class="e-flex-x">
				<view @tap="toggleCategoryMorePopup()" class="more e-m-r-20 e-flex-x" style="align-items: center;">
					<text class="t">更多</text>
					<view class="more-icon"></view>
				</view>
				<view class="sort-by-price">
					<Sort title="价格"></Sort>
				</view>
			</view>
		</view>

		<!-- list  -->
		<view class="e-p-20 list">
			<view class="app-leaks__item item bg-white e-radius-20 e-m-b-20 e-p-20 e-flex" v-for="(item, index) in list"
				:key="item.id" @tap="handleShow(item)">
				<image class="cover" :src="item.userAvatar"></image>
				<view class="e-flex-1 e-p-20 content">
					<view class="title">云炉紫砂壶</view>
					<view class="e-p-t-10 e-p-b-10">
						<text class="price">￥</text>
						<text class="price lg">178</text>
						<text class="price">.00</text>
					</view>
					<view class="buy-bar card e-m-0 e-flex-x">
						<view class="e-flex-x e-flex-1" style="align-items: center;">
							<view class="progress">
								<view class="fill" style="width: 60%;"></view>
							</view>
							<text class="state">未开始</text>
						</view>

						<view class="buy-btn">
							<image v-if="index==1" src="../static/buy-on-cut.png"></image>
							<image v-else src="../static/buy-off-cut.png"></image>
						</view>
					</view>
				</view>
			</view>
			<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" show v-if="list.length === 0"></empty>
			<load-more v-else :showLoad="showLoad"></load-more>
		</view>


		<CategoryPopup ref="categoryPopupRef"></CategoryPopup>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	watch,
	computed
} from 'vue';
import {
	swCustomerList
} from '@/common/request/api'
import {
	useCurrentInstance,
	useQueryPage
} from '@/common/hooks';
import {
	onLoad,
	onShow,
	onPullDownRefresh,
	onReachBottom
} from '@dcloudio/uni-app';
import Sort from './components/sort.vue';
import CategoryPopup from './components/categoryPopup.vue';
import { routeJump } from '@/common/utils';

// ref 
const title = ref("新人展厅")
const currentTimeIndex = ref(0)
const scrollIntoViewId = ref("")
// ref

// component ref 
const categoryPopupRef = ref(null)

//点击活动时间
const onTapTime = (index) => {
	currentTimeIndex.value = index
	scrollIntoViewId.value = "time_id_" + (index - 1)
}


// 切换分类面板
const toggleCategoryMorePopup = () => {
	categoryPopupRef.value.toggle()
}

const handleShow = () => {
	routeJump("./detail?id=1","navigateTo")
}

const getlist = () => new Promise((resolve) => {
	resolve({ code: 200, data: { rows: [{}, {}, {}] } })
})


const {
	showLoad,
	list,
	handleQueryPage,
	handleRefresh
} = useQueryPage({
	api: getlist,
	option: {
		responseKey: 'data.rows'
	},
});


// life circle
onReachBottom(() => {
	handleQueryPage()
})

onLoad(() => {
	handleRefresh()
})
</script>

<style lang="scss" scoped>
.scroll-view-box {
	height: 100vh;
}

.sticky-sw-list-title {
	position: sticky;
	top: 0;
	padding: 30rpx;
	background: #f7f7f7;
	z-index: 999
}

@include appBem_b(showhall) {


	.header {
		background: #E4423B;
		color: white;
		background-image: url("../static/showhall-list-header.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		min-height: 300rpx;

		.time-bar {
			background: rgba(255, 255, 255, .1);

			.time-list {
				overflow: scroll;
				white-space: nowrap;

				.item {
					display: inline-block;
					color: #fff;

					.container {
						padding: 20rpx;
						justify-content: center;
						align-items: center;
					}

					.state {
						color: #ffffff80;
					}

					&.on {
						background-color: white;
						color: #111;

						.state {
							color: #333333;
						}
					}

				}
			}
		}


	}

	.reservation {
		display: block;
		padding: 0 !important;
		background-color: transparent;

		.reservation-btn {
			margin: 0 !important;
			background-color: white;
			border: 0 !important;
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;


			&.on {
				background-color: #E4423B;
				color: white;
			}

			&::after {
				border: 0;
			}
		}
	}

	.card {
		background: rgba(255, 255, 255, 1);
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 20rpx;
	}

	.coundown-timer {
		.t {
			width: 28px;
			height: 20px;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 14px;
			color: #333333;
			line-height: 20px;
			text-align: right;
			font-style: normal;
		}

		.counter {
			width: 20px;
			height: 18px;
			background: #E4423B;
			border-radius: 3px;
			color: white;
			display: inline-block;
			padding: 0 4rpx 6rpx 4rpx;
			margin: 0 6rpx;
		}
	}

	.list {
		.item {
			padding: 0 !important;

			.cover {
				width: 240rpx;
				height: 240rpx;
				border-radius: 20rpx;
				background-color: #ddd;
			}

			.content {
				.title {
					width: 160rpx;
					height: 44rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
					text-overflow: ellipsis;
				}

				.price {
					width: 116rpx;
					height: 50rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
					color: #E4423B;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;

					&.lg {
						font-size: 32rpx;
					}
				}
			}

			.buy-bar {
				background-color: #CCCCCC20;
				position: relative;
				height: 72rpx;
				border-bottom-right-radius: 99rpx;

				.progress {
					background-color: #ccc;
					height: 10rpx;
					width: 50%;
					border-radius: 5rpx;

					.fill {
						background-color: #E4423B;
						height: 100%;
						border-radius: 5rpx;
					}
				}

				.buy-btn{
					position: absolute;
					right: -40rpx;
					top: 0;
					image{
						width: 218rpx;
						height: 72rpx;
					}
				}
				.state {
					width: 60rpx;
					height: 28rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}

	.filters {
		.category {
			white-space: nowrap;
			margin-right: 10rpx;

			.card {
				margin-left: 0;
				margin-top: 0;
				margin-bottom: 0;
				margin-right: 10rpx;
				padding: 10rpx 30rpx;
				border-radius: 99rpx;
				display: inline-block;

				&.on {
					background: #E4423B;
					color: #fff;
				}
			}
		}

		.more-icon {
			width: 0;
			height: 0;
			border: 4px solid #ccc;
			border-color: #ccc transparent transparent transparent;
			margin-bottom: -16rpx;
			&.on {
				border-color: #E4423B transparent transparent transparent;
			}
		}
	}
}
</style>